$(() => {
  // 调用头部导航切换背景
  bgColor()
  // 调用浏览器窗口变化函数是通过window的resize事件来的，如果窗口不发生变化，函数是不执行的，意味着图片加载不出来
  // 所以一上来先加载窗口变化函数
  resizeFn()
  PayShow()
  tab1()
  tab2()
})
var bgColor = () => {
  $('#headerNav li').click(function () {
    $(this).addClass('active').siblings().removeClass('active')
  })
}
// 浏览器尺寸发生变化，显示不一样的轮播图片
// resize事件是窗口大小改变时发生的事件
$(window).on('resize', resizeFn)
function resizeFn() {
  console.log('窗口变化了')
  var isWidowWidth = $(window).width() < 768
  $('#swiper .item').each((index, element) => {
    if (isWidowWidth) {
      //手机端
      $(element).children().attr('src', $(element).children().attr('data-xs'))
    } else {
      // PC端
      $(element).children().attr('src', $(element).children().attr('data-lg'))
    }
  })
}
// 声明一个支付交易保证模块的渲染DOM
function PayShow() {
  for (let i = 0; i < 6; i++) {
    $('#pay .row').append(`
        <div class="col-md-4 col-lg-4 col-sm-6 col-xs-6">
            <div class="media">
              <div class="media-left">
                <img src="./images/money.png" />
              </div>
              <div class="media-body">
                <h4 class="media-heading">支付交易保证</h4>
                <p>银联支付全程保证支付安全</p>
              </div>
            </div>
          </div>
    
    `)
  }
}
// 声明渲染tab1页面
function tab1() {
  var activeObj
  for (let i = 0; i < 8; i++) {
    for (let j = 0; j < 6; j++) {
      if (j % 2 == 0) {
        activeObj = 'active1'
      } else {
        activeObj = 'active2'
      }
      $(`#tab1 #p${i + 1} .row`).append(`
          <div class="col-md-4 col-sm-6 col-xs-12">
            <p class="${activeObj}">1</p>
          </div>
      `)
    }
  }
}
//
function tab2(params) {
  $('#myTab_2 a').click(function () {
    $('.newsTitle').text($(this).attr('data-title'))
  })
}
